<?php require_once("./includes/session.php"); ?>
<?php require_once("./includes/open_connection.php"); ?>
<?php require_once("./includes/functions.php"); ?>
<?php
	if(logged_in()){
		redirect_to("main.php");
	}
	
	if(isset($_GET['logout']) && $_GET['logout']==1)
	{
		$message = "You Have Been Logged Out";
	}
	$username = "";
	$password = "";
	// authenticate user via function defined in functions.php
	authenticate_user($username, $password);
?>
<?php include("./includes/header.php"); ?>
<script>
jQuery.noConflict();
(function($) { 
       // EXTREMELY IMPORTANT TO WAIT FOR THE WINDOW TO LOAD BEFORE RUNNING SCRIPT
       $(window).load(function(){ 
        	// jquery defined here is for making login.php dynamic
        	
        	// define the required inputs from user in order to become a member
	        var username = $("#username"),
	            email = $( "#email" ),
	            password = $( "#password" ),
	            allFields = $( [] ).add( name ).add( email ).add( password ),
	            tips = $( ".validateTips" );
	 		
	 		// HELPER FUNCTIONS FOR VERIFYING VALID FORM INPUT 
	        function updateTips( t ) {
	            tips
	                .text( t )
	                .addClass( "ui-state-highlight" );
	            setTimeout(function() {
	                tips.removeClass( "ui-state-highlight", 1500 );
	            }, 500 );
	        }
	 
	        function checkLength( o, n, min, max ) {
	            if ( o.val().length > max || o.val().length < min ) {
	                o.addClass( "ui-state-error" );
	                updateTips( "Length of " + n + " must be between " +
	                    min + " and " + max + "." );
	                return false;
	            } else {
	                return true;
	            }
	        }
	 
	        function checkRegexp( o, regexp, n ) {
	            if ( !( regexp.test( o.val() ) ) ) {
	                o.addClass( "ui-state-error" );
	                updateTips( n );
	                return false;
	            } else {
	                return true;
	            }
	        }
	 
	 		// EVENTS 
	        $("#new_member").click(function(event) {
	        		event.preventDefault();
	                $("#new_member_form_dialog").dialog("open");
	        });

	        $("#login").click(function(event) {
                $("#new_member_form_dialog").dialog("open");
        	});
	        //////////////////////////////////////////////////////////////////////////////////////////////////
	        // BELOW ARE THE DEFAULT CONDITIONS, UPON INITIAL PAGE LOAD THESE WILL DETERMINE PAGE DISPLAY
	        //
	        
	        // creation of the dialog jquery-ui widget
	        $("#new_member_form_dialog").dialog({
	            autoOpen: false,
	            show: "blind",
	            hide: "slideup",
	            height: 325,
	            width: 400,
	            modal: true,
	            buttons: {
			               Submit: function() {
			                    var bValid = true;
			                    allFields.removeClass( "ui-state-error" );
			 
			                    bValid = bValid && checkLength( username, "username", 3, 16 );
			                    bValid = bValid && checkLength( email, "email", 6, 80 );
			                    bValid = bValid && checkLength( password, "password", 5, 16 );
			 
			                    bValid = bValid && checkRegexp( username, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
			                    bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
			                    bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
			 
			                    if(bValid) {
			                    	$("#message").removeClass("ui-state-error");
				                    var action = $("#new_member_form").attr("action");
				                    var form_data = { 
											username: username.val(),
											password: password.val(),
											emailaddr: email.val(),
											is_ajax: 1

				                    };

				                    $.ajax({
											type: "POST",
											url: action,
											data: form_data,
											success: function(response)
											{
												if(response == "success"){
													$("#message").html("Success, Please Login");
												}
												else{
														$("#message").html(response);
														$("#message").addClass("ui-state-error");
												}
											}
				                    });
				                    allFields.val( "" ).removeClass( "ui-state-error" );
				                    $( this ).dialog( "close" );
				                    return false;
			                    }
			                },
			                Cancel: function() {
			                    $( this ).dialog( "close" );
	                	    }
	            },
	            close: function() {
	                allFields.val( "" ).removeClass( "ui-state-error" );
	            }
	        });
		});   
})(jQuery);
</script>
</head>

<body>
<div id="main">
<body>	
<table width='100%' border='0' align='center' cellpadding='0' cellspacing='0'>
  <td valign='top' class='login_bg'>
    <table width='1002' border='0' align='center' cellpadding='0' cellspacing='0'>
    	<tr><td>&nbsp;</td></tr>
    	<tr><td>&nbsp;</td></tr>
    	<tr>
    		<td class="logo" align='center'>CMS</td>
    	</tr>
    	<tr><td>&nbsp;</td></tr>
    	<tr><td>&nbsp;</td></tr>
        <tr>
           <td>
              <table width='100%' border='0' align='center' cellpadding='0' cellspacing='0' style='position:relative;top:5.75em;'>
                <tr>
                  <td width='153' class='login_icon'>&nbsp;</td>
                  <td width='106' class="login">Welcome to the Credit Management System</td>
                  <td width='394'>
                  	<form action="index.php" method="post">
	                   <table width='55%' border='0' align='right' cellpadding='2' cellspacing='2'>
	                   	 <tr>
	                   	 	<td><label id="message"> </label></td>
	                   	 </tr>
	                     <tr>
							<td class='login'>USERNAME:</td>
							<td><input type="text" name="username" maxlength="30" value="<?php echo htmlentities($username); ?>" /></td>
						 </tr>
						 <tr>
							<td class='login'>PASSWORD:</td>
							<td><input type="password" name="password" maxlength="30" value="<?php echo htmlentities($password); ?>" /></td>
						 </tr>
						 <tr>
							<td><input type="submit" name="submit" value="Login" /></td>
							<td><input type="button" name="submit" value="Become a Member" id="new_member" /></td>
						 </tr>
	                   </table>
                   	</form>
                  </td>
                </tr>
             </table>
          </td>
        </tr>
    </table>
  </td>
</table>
<div id="new_member_form_dialog" title="New Member Form">
    <label class="validateTips"> </label>
    <form id="new_member_form" name="new_member_form" action="processLogin.php" method="post">
	    <fieldset>
	        <label for="username">Username</label>
	        <input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all" />
	        <br />
	        <label for="email">Email</label>
	        <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
	        <br	/>
	        <label for="password">Password</label>
	        <input type="password" name="password" id="password" class="text ui-widget-content ui-corner-all" />
	    </fieldset>
    </form>
</div>
</body>
</div>
</html>
<?php include("./includes/footer.php"); ?>